<template>
    <transition name="message-fade">
        <div v-if="!closed" :class="['message','message-'+type,center?'is':'']" :style="{top:offset+'px'}">
            <p class="message-content">{{message}}</p>
            <i class="icon icon-close" @click="close()"></i>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "TMessage",
        data() {
            return {
                message: '',
                type: "info",
                center: true,
                offset: 20,
                closed: false,
                duration: 1000,
                timer: null,
                onClose: null
            }
        },
        mounted() {
            this.timer = setTimeout(
                () => {
                    if (!this.closed) {
                        this.close();
                    }
                }, this.duration
            )
        },
        methods: {
            close() {
                this.closed = true
                if (typeof this.onClose == 'function') {
                    this.onClose();
                }
            }
        }
    }
</script>

<style scoped>

</style>
